<template>
	<view class="content">
		<mytabbar :current-page="4"></mytabbar>
		<view class="main">
			<view class="user_info_wrap">
				<view v-if="userinfo.username" class="user_img_wrap">
					<image class="user_bg" :src="avatarUrl"></image>
					<view class="user_info" @click="goToPage('/pages/Personal/Personal')">
						<image class="user_icon" :src="avatarUrl" mode="aspectFill"></image>
						<view class="user_name">{{userinfo.username}}</view>
					</view>
				</view>
				<view v-else class="user_btn">
					<view @click="goToPage('/pages/login/login')">登录</view>
				</view>
			</view>
			<view class="user_content">

				<view class="user_main">
					<!-- 历史足迹 -->
					<!-- 我的订单 -->
					<view class="orders_wrap">
						<view class="orders_title">
							<view>我的订单</view>
							<view @click="goToPage('/pages/orders/orders?type=0')">所有订单></view>
						</view>
						<view class="order_content">
							<view class="orderbtn" @click="goToPage('/pages/orders/orders?type=1')">
								<view class="iconfont icon-daizhifu"></view>
								<view class="order_name">待支付</view>
							</view>
							<view class="orderbtn" @click="goToPage('/pages/orders/orders?type=3')">
								<view class="iconfont icon-daishouhuo"></view>
								<view class="order_name">待收货</view>
							</view>
							<view class="orderbtn" @click="goToPage('/pages/orders/orders?type=4')">
								<view class="iconfont icon-tianmaojisutuikuan"></view>
								<view class="order_name">退款/退货</view>
							</view>
						</view>
					</view>
					<view class="problems_wrap">
						<view class="problems_title">
							<view>其他服务</view>
						</view>
						<view class="problem_content">
							<view class="top">
								<view class="problembtn" @click="goToPage('/pages/adress/adress')">
									<view class="iconfont icon-dizhi"></view>
									<view class="problem_name">收货地址</view>
								</view>
								<view class="problembtn" @click="goToPage('/pages/myFollow/myFollow')">
									<view class="iconfont icon-yiguanzhu"></view>
									<view class="problem_name">关注的人</view>
								</view>
								<view class="problembtn" @click="goToPage('/pages/merchant/merchant')">
									<view class="iconfont icon-24gf-printer trader"></view>
									<view class="problem_name">商家入驻</view>
								</view>
								<view class="problembtn" @click="goToPage('/pages/myFans/myFans')">
									<view class="iconfont icon-shoucangfill"></view>
									<view class="problem_name">我的粉丝</view>
								</view>
							</view>
							<view class="bot">
								<view class="problembtn" @click="goToPage('/pages/frequentIssue/frequentIssue')">
									<view class="iconfont icon-changjianwentixiangguanwenti2"></view>
									<view class="problem_name">常见问题</view>
								</view>
								<view class="problembtn" @click="goToPage('/pages/feedback/feedback')">
									<view class="iconfont icon-fankui"></view>
									<view class="problem_name">反馈</view>
								</view>
								<!-- <view class="problembtn">
									<view class="iconfont icon--kefu"></view>
									<view class="problem_name">在线客服</view>
								</view> -->
								<button class="problem_kefu problembtn" open-type="contact" bindcontact="handleContact"
									session-from="sessionFrom">
									<view class="iconfont icon--kefu" style="height: 50upx;"></view>
									<view>在线客服</view>
								</button>
								<view class="problembtn" @click="goToPage('/pages/setting/setting')">
									<view class="iconfont icon-shezhitianchong"></view>
									<view class="problem_name">设置</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				userinfo: {},
				// 被收藏的商品的数量
				collectNums: 0,
				avatarUrl: '',
				BaseUrl: '',
				ImgUrl: ''
			}
		},
		onLoad() {
			let BaseUrl = getApp().globalData.BaseUrl
			let ImgUrl = getApp().globalData.ImgUrl
			this.BaseUrl = BaseUrl
			this.ImgUrl = ImgUrl
		},
		onShow() {
			this.userinfo = uni.getStorageSync("userinfo");
			this.avatarUrl = this.ImgUrl + this.userinfo.avatar;
		},
		methods: {
			goToPage(url) {
				if (!url) return;
				uni.navigateTo({
					url: url + '?userId=' + this.userinfo.id + '&avatar=' + this.userinfo.avatar + '&username=' +
						this.userinfo.username
				});
			},
			kefu() {
				wx.openCustomerServiceChat({
					extInfo: {
						url: ''
					},
					corpId: '',
					success(res) {
						console.log(res)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100%;
		background-color: #edece8;
		// z-index: -1;
	}

	.main {
		// z-index: -1;
	}

	.problem_kefu {
		display: flex;
		justify-content: center;
		flex-direction: column;
		color: #666666;
		font-size: 30upx;
		height: 100upx;
		background-color: #fff;
		// background-color: #007AFF;
		// border: none;
	}

	.problem_kefu:after {
		border: none;
		padding: 0;
	}

	.user_info_wrap {
		height: 35vh;
		overflow: hidden;
		background-color: $color;
		position: relative;

		.user_img_wrap {
			position: relative;

			.user_bg {
				height: 40vh;
				width: 100%;
				// 高斯模糊
				filter: blur(10rpx);
			}

			.user_info {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: 20%;
				text-align: center;

				.user_icon {
					width: 150rpx;
					height: 150rpx;
					border-radius: 50%;
				}

				.user_name {
					color: #fff;
					// margin-top: 5rpx;
					// font-size: 40rpx;
				}
			}
		}

		.user_btn {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: 25%;
			border: 1rpx solid greenyellow;
			color: greenyellow;
			font-size: 38rpx;
			padding: 30rpx;
			border-radius: 10rpx;
		}
	}



	.user_content {
		position: relative;

		.user_main {
			padding-bottom: 100rpx;
			color: #666;
			position: absolute;
			width: 90%;
			left: 50%;
			transform: translateX(-50%);
			top: -40rpx;


			.orders_wrap {
				height: 180upx;
				background-color: #fff;
				margin-top: 60rpx;
				border-radius: 30upx;
				box-shadow: 0 0 10upx #888;

				.orders_title {
					padding: 20rpx;
					border-bottom: 1rpx solid #ccc;
					display: flex;
					justify-content: space-between;
				}

				.order_content {
					display: flex;
					height: 100upx;

					.orderbtn {
						padding: 15rpx 0;
						flex: 1;
						text-align: center;

						.iconfont {
							color: $color;
							font-size: 40rpx;
						}
					}
				}
			}

			/////
			.problems_wrap {
				height: 300upx;
				background-color: #fff;
				margin-top: 60rpx;
				border-radius: 30upx;
				box-shadow: 0 0 10upx #888;

				.problems_title {
					padding: 20rpx;
					border-bottom: 1rpx solid #ccc;
					display: flex;
					justify-content: space-between;
				}

				.problem_content {
					display: flex;
					height: 100upx;
					flex-direction: column;

					.top {
						width: 100%;
						display: flex;

					}

					.bot {
						width: 100%;
						display: flex;
					}

					.problembtn {
						padding: 15rpx 0;
						flex: 1;
						text-align: center;

						.trader {
							color: $color;
							font-size: 40rpx;
						}

						.iconfont {
							// color: $color;
							font-size: 40rpx;
						}
					}
				}
			}
		}
	}
</style>
